<template>
    <div>
        <div @click="clickDeleteDuplicate" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <row-delete/>
            </n-icon>
            <Handle id="deleteDuplicate-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="deleteDuplicate-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>删除重复</span>
        <n-drawer v-model:show="active" :width="'80vw'">
            <n-drawer-content>
                <template #header>
                    删除重复行
                </template>
                <!--获取上级节点数据 进行删除重复行-->
                <n-space>
                    <n-button @click="getSuperiorData">
                        <template #icon>
                            <n-icon>
                                <Login/>
                            </n-icon>
                        </template>
                        获取上级节点数据
                    </n-button>
                    <n-select
                        v-model:value="delete_repeat.column"
                        :options="props.data.data.title"
                        multiple
                        placeholder="输入选择的列,全部则不填"
                        label-field="title"
                        value-field="key"
                    />
                    <n-button @click="delete_repeat.delete_repeat">
                        <template #icon>
                            <n-icon>
                                <row-delete/>
                            </n-icon>
                        </template>
                        删除重复行
                    </n-button>
                </n-space>
                <!--展示数据-->
                <n-data-table :columns="props.data.data.title" :data="props.data.data.data" :pagination="pagination"/>
                <template #footer>
                    <n-button @click="active=false">完成</n-button>
                </template>
            </n-drawer-content>
        </n-drawer>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {RowDelete, Login} from "@vicons/carbon";
import workApi from "@/http/workApi";
import {useElementsStore} from "@/stores/elements";

const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()
const clickDeleteDuplicate = () => {
    active.value = true
}
// 抽屉
const active = ref(false)
const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data}

                    return
                }
            }
        }
    }
}
const deleteDuplicate = () => {
    // 发送数据到后台删除重复行
    workApi.post("perform_tasks/delete_repeat", {
        data: props.data.data
    }).then(s => {
        props.data.data = s.data
    })
}
const delete_repeat = reactive({
    column:[],
    delete_repeat(){
        workApi.post("perform_tasks/delete_repeat",{
            data:props.data.data,
            operation:{
                row:{
                    serial_number:[]
                },
                column:{
                    serial_number:delete_repeat.column,
                }
            }
        }).then(r=>{
            props.data.data = r.data
        });
    }
})
// 单页数据量
const pagination = {
    pageSize: 10
}
</script>

<style scoped lang="less">
.n-select{
    width: 300px;
}
</style>